<template>
    <div class="update-name">
        <van-nav-bar title="设置昵称" left-text="取消" right-text="完成" @click-left="$emit('close')"
            @click-right="onUpdateName" />
        <div class="field-wrep">
            <van-field v-model.trim="message" rows="2" type="textarea" maxlength="11" placeholder="请输入昵称"
                show-word-limit />
        </div>
    </div>
</template>

<script>
import { updateUserProfile } from '../../../api/user'

export default {
    model: {
        prop: 'userName',
        event: 'changeName'
    },
    props: {
        userName: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            message: this.userName
        }
    },
    methods: {
        async onUpdateName() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration: 0
            });
            try {
                const localName = this.message
                if (!localName.length) {
                    return this.$toast('昵称不能为空')
                } else {
                    await updateUserProfile({
                        name: this.message
                    })
                    this.$emit('close')
                    this.$emit('changeName', this.message)
                    this.$toast.success('更新昵称成功')
                }
            } catch (err) {
                // console.log('修改用户信息失败', err);
                this.$toast.fail('更新昵称失败')
            }
        }
    }
}
</script>

<style scoped lang="less">
.update-name {
    :deep(.van-nav-bar) {
        background-color: #fff !important;

        .van-nav-bar__title {
            color: #000;
        }
    }

    .field-wrep {
        padding: 20px;
    }
}
</style>